"use client";

import React from "react";
import { ProLayout, PageContainer } from "@ant-design/pro-components";
import {
  UserOutlined,
  TeamOutlined,
  BranchesOutlined,
  FormOutlined,
  DashboardOutlined,
  LogoutOutlined,
  SettingOutlined,
  FileTextOutlined,
  BankOutlined,
  CloudServerOutlined,
} from "@ant-design/icons";
import { Avatar, Dropdown, Space, Spin } from "antd";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/app/admin/components/AuthContext";

const menuData = [
  {
    path: "/admin/users",
    name: "用户管理",
    icon: <UserOutlined />,
  },
  {
    path: "/admin/menus",
    name: "菜单管理",
    icon: <UserOutlined />,
  },
  {
    path: "/admin/agents",
    name: "智能体管理",
    icon: <UserOutlined />,
  },
  {
    path: "/admin/categories",
    name: "分类管理",
    icon: <UserOutlined />,
  },
  {
    path: "/admin/chat",
    name: "聊天日志",
    icon: <CloudServerOutlined />,
  },{
    path: "/admin/contents",
    name: "内容管理",
    icon: <CloudServerOutlined />,
  },
  {
    path: "/admin/submissions",
    name: "网站提交管理",
    icon: <FormOutlined />,
  },
  {
    path: "/admin/friendly-links",
    name: "友情链接管理",
    icon: <CloudServerOutlined />,
  }



];

interface AdminLayoutProps {
  children: React.ReactNode;
  title?: string;
}

export default function AdminLayout({ children, title }: AdminLayoutProps) {
  const pathname = usePathname();
  const { user, loading, logout } = useAuth();

  // 如果在登录页面，不显示布局
  if (pathname === "/admin/login") {
    return <>{children}</>;
  }

  // 加载中
  if (loading) {
    return (
      <div
        style={{
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Spin size="large" />
      </div>
    );
  }

  // 未登录，显示加载状态，让AuthContext处理跳转
  if (!user) {
    return (
      <div
        style={{
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Spin size="large" />
      </div>
    );
  }

  // 用户菜单
  const userMenuItems = [
    {
      key: "profile",
      icon: <UserOutlined />,
      label: "个人资料",
    },
    {
      key: "settings",
      icon: <SettingOutlined />,
      label: "系统设置",
    },
    {
      type: "divider" as const,
    },
    {
      key: "logout",
      icon: <LogoutOutlined />,
      label: "退出登录",
      onClick: logout,
    },
  ];

  return (
    <div style={{ height: "100vh" }}>
      <ProLayout
        title="后台管理系统"
        logo="/logo.png"
        layout="mix"
        splitMenus={false}
        navTheme="light"
        contentWidth="Fluid"
        fixedHeader
        fixSiderbar
        colorWeak={false}
        menu={{
          type: "group",
          request: async () => {
            return menuData;
          },
        }}
        location={{
          pathname,
        }}
        menuItemRender={(item, dom) => (
          <Link href={item.path || "/"}>{dom}</Link>
        )}
        breadcrumbRender={(routers = []) => [
       
          ...routers,
        ]}
        menuHeaderRender={undefined}
        rightContentRender={() => (
          <Dropdown
            menu={{ items: userMenuItems }}
            placement="bottomRight"
            trigger={["click"]}
          >
            <Space style={{ cursor: "pointer", padding: "0 12px" }}>
              <Avatar
                size="small"
                src={user.avatar}
                icon={!user.avatar && <UserOutlined />}
              />
              <span>{user.nickname || user.username}</span>
            </Space>
          </Dropdown>
        )}
      >
        <PageContainer
          header={{
            title: title || false,
          }}
        >
          {children}
        </PageContainer>
      </ProLayout>
    </div>
  );
}
